import React, { useRef, useEffect, useState, useMemo } from 'react';
import { Form, Layout, Table, Input, Pagination, Button } from 'antd';
import { RedoOutlined } from '@ant-design/icons';
import Condition from 'src/components/Condition'
import { getUserList, getUserCount } from 'src/api/getData'
import './index.less'

const { Content } = Layout;

const UserList = () => {

    const tableRef = useRef(null);
    const [y, setY] = useState(false);
    const [visible, setVisible] = useState(false);

    // 搜索条件
    const [gettingQuery, setgettingQuery] = useState({
        pageNumber: 1,
        pageSize: 10,
    })

    const [loading, setLoading] = useState(false);
    const [state, setState] = useState({});

    const getY = () => {
        let y = tableRef.current.offsetHeight - 55.33
        let tbody = tableRef.current.querySelector('tbody.ant-table-tbody')
        if (tbody && tbody.offsetHeight < y) {
            y = false;
            tbody = null;
        }
        return y
    }

    async function getUserListAsync(params = {}) {
        try {
            setLoading(true)
            const option = {
                ...gettingQuery,
                ...params
            }
            setgettingQuery(option)
            const res = await getUserList(option);
            setState(res.data);
        } catch (error) {

        }
        setLoading(false)
    }

    useEffect(() => {
        getUserListAsync()
    }, [])

    useEffect(() => {
        let y = getY()
        setY(y)
    }, [state.list])

    useEffect(() => {
        let timer = null
        const resize = () => {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                const y = getY();
                setY(y)
            }, 200)
        }
        window.addEventListener('resize', resize)
        return () => {
            window.removeEventListener('resize', resize)
        }
    }, [])

    const handlePaginationChange = (page, pageSize) => {
        getUserListAsync({
            pageNumber: pageSize !== gettingQuery.pageSize ? 1 : page,
            pageSize,
        })
    }

    const columns = useMemo(() => ([
        {
            title: '用户ID',
            dataIndex: 'id'
        },
        {
            title: '用户姓名',
            dataIndex: 'username',
        },
        {
            title: '注册地址',
            dataIndex: 'city',
        },
        {
            title: '注册日期',
            dataIndex: 'registe_time',
        },
    ]), []);

    return <Layout className="user-container">
        <div className="form-container">
            <Form
                name="basic"
                labelCol={{
                    span: 8
                }}
                wrapperCol={{
                    span: 16
                }}
                layout="inline"
            >
                <Condition
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancle={() => setVisible(false)}
                    onReset={() => setVisible(false)}
                >
                    <Form.Item
                        label="注册地址"
                        name="age"
                        rules={[{ required: true, message: '请输入注册地址!' }]}
                    >
                        <Input />
                    </Form.Item>
                </Condition>
                <Form.Item
                    label="姓名"
                    name="username"
                >
                    <Input placeholder='请输入'/>
                </Form.Item>
                <Form.Item
                    label="用户ID"
                    name="id"
                >
                    <Input placeholder='请输入'/>
                </Form.Item>
                <span className="redooutlined-icon">
                    <RedoOutlined title="刷新" />
                </span>
                <Button onClick={() => setVisible(!visible)}>高级查询</Button>
            </Form>
        </div>
        {/* <Button
            onClick={() => {
                props.open_new_tab(`/portal/iframe/home`, '详情', 'https://www.baidu.com/')
            }}
        >测试</Button> */}
        <Content>
            <div className="table-container" ref={tableRef}>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={state.list || []}
                    bordered={true}
                    loading={loading}
                    pagination={false}
                    scroll={{
                        x: '100%',
                        y: y
                    }}
                />
            </div>
        </Content>
        <Pagination
            pageSizeOptions={[10, 20, 30, 50]}
            showSizeChanger={true}
            onShowSizeChange={handlePaginationChange}
            onChange={handlePaginationChange}
            showTotal={total => `共${total}条`}
            className="ant-table-pagination ant-table-pagination-right"
            showQuickJumper={{
                goButton: <Button
                    style={{ marginLeft: 8 }}
                >跳转</Button>
            }}
            current={gettingQuery.pageNumber}
            pageSize={gettingQuery.pageSize}
            total={state.total}
        />
    </Layout>
}

export default UserList;